<template>
	<u-popup :show="show" mode="center" @close="close" bgColor="transparent">
	<view class="container">
		<!-- 触发按钮 -->
		<!-- <button @click="startProcess" class="start-btn">
			开始合成（失败效果）
		</button> -->

		<!-- 合成容器 -->
		<view v-if="isProcessStarted" class="comp-container">
			<!-- 碎片元素 -->
			<view v-for="(fragment, index) in fragments" :key="index" :style="fragmentStyle(index)" class="fragment">
			</view>

			<!-- 合成结果（失败：红色圆形+叉号） -->
			<view v-if="isFinalResultVisible" class="final-result">
				<svg class="icon" viewBox="0 0 100 100">
					<!-- 外圆 -->
					<circle cx="50" cy="50" r="40" fill="none" stroke="#fff" stroke-width="4" class="danger-stroke" />
					<!-- 叉号 -->
					<path d="M35,35 L65,65 M65,35 L35,65" fill="none" stroke="#fff" stroke-width="6"
						stroke-linecap="round" stroke-linejoin="round" class="danger-stroke" />
				</svg>
			</view>
		</view>

		<!-- 失败提示 -->
		<view v-if="isFailureVisible" class="failure-message">
			合成失败！
		</view>
	</view>
	</u-popup>
</template>

<script>
	export default {
		props:{
			show:{
				type:Boolean,
				default:false
			}
		},
		data() {
			return {
				isProcessStarted: false,
				isFinalResultVisible: false,
				isFailureVisible: false,
				fragments: Array(8).fill({
					top: 0,
					left: 0,
					size: 200
				}),
			};
		},
		methods: {
			close(){},
			// 启动合成过程
			startProcess() {
				this.isProcessStarted = true;
				this.animateFragments();

				setTimeout(() => {
					this.isFinalResultVisible = true;
					this.animateFinalResult();

					setTimeout(() => {
						this.isFailureVisible = true;
						setTimeout(() => {
							this.resetProcess();
						}, 2000);
					}, 1000);
				}, 1800);
			},

			// 碎片动画（随机位置和延迟）
			animateFragments() {
				this.fragments.forEach((fragment, index) => {
					setTimeout(() => {
						fragment.top = `${Math.random() * 100}%`;
						fragment.left = `${Math.random() * 100}%`;
						fragment.size = Math.random() * (34 - 27) + 27;
					}, index * 200);
				});
			},

			// 合成结果动画
			animateFinalResult() {
				// 这里你可以增加自定义动画的逻辑
			},

			// 重置过程
			resetProcess() {
				this.isProcessStarted = false;
				this.isFinalResultVisible = false;
				this.isFailureVisible = false;
				this.fragments = Array(8).fill({
					top: 0,
					left: 0,
					size: 10
				});
				this.$emit('success')
			},

			// 定义每个碎片的样式
			fragmentStyle(index) {
				return {
					position: 'absolute',
					top: this.fragments[index].top,
					left: this.fragments[index].left,
					width: `${this.fragments[index].size}rpx`,
					height: `${this.fragments[index].size}rpx`,
					backgroundColor: '#f87171',
					opacity: 1,
					borderRadius: '50%',
				};
			}
		}
	};
</script>

<style scoped>
	.container {
		/* background-color: #1a202c; */
		height: 50vh;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		padding: 20px;
		color: white;
	}

	.start-btn {
		background-color: #ef4444;
		color: white;
		font-weight: bold;
		padding: 15px 30px;
		border-radius: 30px;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
		transition: all 0.3s;
	}

	.start-btn:hover {
		background-color: #dc2626;
		transform: translateY(-4px);
	}

	.comp-container {
		position: relative;
		width: 200px;
		height: 200px;
	}

	.fragment {
		position: absolute;
		background-color: #f87171;
		border-radius: 50%;
		opacity: 0;
	}

	.final-result {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		display: flex;
		justify-content: center;
		align-items: center;
		width: 80px;
		height: 80px;
		background-color: #ef4444;
		border-radius: 50%;
		box-shadow: 0 0 8px rgba(248, 113, 113, 0.8);
	}

	.icon {
		width: 50px;
		height: 50px;
	}

	.failure-message {
		margin-top: 20px;
		font-size: 24px;
		font-weight: bold;
		color: #dc2626;
	}
</style>